<template>
  <div class="container">
    <el-page-header @back="goBack">
    </el-page-header>
    <div class="search-box">
      <input
        v-model="searchKey"
        type="search"
        id="search">
      <button @click="searchByHand">搜索</button>
      <el-button @click="submitAddress" style="margin-left: 2px">确认
<!--        <el-button type="text" @click="open" style="align-content: center">确认</el-button>-->
      </el-button>
<!--      <input type="hidden" v-model="addr">-->
      <div class="tip-box" id="searchTip"></div>
    </div>
    <el-amap class="amap-box"
             :amap-manager="amapManager"
             :vid="'amap-vue'"
             :zoom="zoom"
             :plugin="plugin"
             :center="center"
             :events="events"
    >
      <!-- 标记 -->
      <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker"></el-amap-marker>

    </el-amap>
  </div>


</template>

<script>
  import {AMapManager, lazyAMapApiLoaderInstance} from 'vue-amap'
  let amapManager = new AMapManager()
  import { MessageBox } from 'element-ui'
  // import qs from 'qs'
  export default {
    name: 'MYAMAP',
    data() {
      let self = this
      return {
        address: null,
        searchKey: '',
        amapManager,
        markers: [],
        searchOption: {
          city: '全国',
          citylimit: true
        },
        center: [118.156582, 24.51033],
        zoom: 17,
        lng: 0,
        lat: 0,
        loaded: false,
        markerEvent:{
          click(e){
            console.log(e);
          }
        },
        events: {
          init() {
            lazyAMapApiLoaderInstance.load().then(() => {
              self.initSearch()
            })
          },
          // 点击获取地址的数据
          click(e) {
            self.markers = []
            let {lng, lat} = e.lnglat
            self.lng = lng
            self.lat = lat
            self.center = [lng, lat]
            self.markers.push([lng, lat])
            // 这里通过高德 SDK 完成。
            let geocoder = new AMap.Geocoder({
              radius: 1000,
              extensions: 'all'
            })
            geocoder.getAddress([lng, lat], function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                if (result && result.regeocode) {
                  console.log(result.regeocode.formattedAddress)
                  self.address = result.regeocode.formattedAddress
                  self.searchKey = result.regeocode.formattedAddress
                  self.$nextTick()
                }
              }
            })
          }
        },
        // 一些工具插件
        plugin: [
          {
            // 定位
            pName: 'Geolocation',
            events: {
              init(o) {
                // o是高德地图定位插件实例
                o.getCurrentPosition((status, result) => {
                  if (result && result.position) {
                    // 设置经度
                    self.lng = result.position.lng
                    // 设置维度
                    self.lat = result.position.lat
                    // 设置坐标
                    self.center = [self.lng, self.lat]
                    self.markers.push([self.lng, self.lat])
                    // load
                    self.loaded = true
                    // 页面渲染好后
                    self.$nextTick()
                  }
                })
              },
              click(e){
                console.log(e);
              }
            }
          },
          {
            // 工具栏
            pName: 'ToolBar',
            events: {
              init(instance) {
                console.log(instance);
              }
            }
          },
          {
            // 鹰眼
            pName: 'OverView',
            events: {
              init(instance) {
                console.log(instance);
              }
            }
          },
          {
            // 地图类型
            pName: 'MapType',
            defaultType: 0,
            events: {
              init(instance) {
                console.log(instance);
              }
            }
          },
          {
            // 搜索
            pName: 'PlaceSearch',
            events: {
              init(instance) {
                console.log(instance)
              }
            }
          }
        ]
      }
    },
    methods: {
      submitAddress: function (){
        console.log('经纬度',this.center) //点击确定时打印经纬度
        console.log('纬度',this.lat)
        console.log('经度',this.lng)
        this.$prompt('请输入站点名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '您设置的站点名称为: ' + value,
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
        // console.log('地址',this.address) //地址
        this.$axios.post('/getTest', {
            // center: this.center,
          // name: MessageBox.alert.message,
            name: this.address,
            longitude: this.lng,
            latitude: this.lat
        }).then(response => {
          // if (response.data == "1") {
          //   alert("登陆成功");
          //   this.$router.replace('/HelloWorld');
          // } else if (response.data == "2"){
          //   alert(response);
          // }
          // this.$router.replace('/HelloWorld');
          // alert(JSON.stringify(this.user))
        }).catch(err => { // 失败后的回调
          alert(err)
        })
      },
      initSearch() {
        let vm = this
        let map = this.amapManager.getMap()
        AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
          var poiPicker = new PoiPicker({
            input: 'search',
            placeSearchOptions: {
              map: map,
              pageSize: 10
            },
            suggestContainer: 'searchTip',
            searchResultsContainer: 'searchTip'
          })
          vm.poiPicker = poiPicker
          // 监听poi选中信息
          poiPicker.on('poiPicked', function (poiResult) {
            // console.log(poiResult)
            let source = poiResult.source
            let poi = poiResult.item
            if (source !== 'search') {
              poiPicker.searchByKeyword(poi.name)
            } else {
              poiPicker.clearSearchResults()
              vm.markers = []
              let lng = poi.location.lng
              let lat = poi.location.lat
              let address = poi.cityname + poi.adname + poi.name
              vm.center = [lng, lat]
              console.log(vm.center)
              vm.markers.push([lng, lat])
              vm.lng = lng
              vm.lat = lat
              vm.address = address
              vm.searchKey = address
            }
          })
        })
        // console.log('经纬度',this.center)
        // console.log('地址',this.address)
      },
      searchByHand() {
        if (this.searchKey !== '') {
          this.poiPicker.searchByKeyword(this.searchKey)
        }
      },
      goBack: function () {
        this.$router.push({ path: '/siteconfig/site' })
      }
    }
  }


</script>

<style lang="scss" scoped>
  .container {
    width:100%;
    height:100%;
    // position: relative;
    // left: 0;
    // top: 50%;
    // transform: translate3d(-50%, -50%, 0);
    // border: 1px solid #999;
  }

  .search-box {
    position: absolute;
    z-index: 5;
    width: 70%;
    left: 13%;
    top: 10px;
    height: 30px;
  }

  .search-box input {
    float: left;
    width: 59%;
    height: 100%;
    border: 1px solid #30ccc1;
    padding: 0 8px;
    outline: none;
  }

  .search-box button {
    float: left;
    width: 20%;
    height: 100%;
    background: #30ccc1;
    border: 1px solid #30ccc1;
    color: #fff;
    outline: none;
  }

  .tip-box {
    width: 100%;
    max-height: 260px;
    position: absolute;
    top: 30px;
    overflow-y: auto;
    background-color: #fff;
  }
</style>
